<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet/less" href="./less/reset.less"/>
    <link rel="stylesheet/less" href="./less/orderDetails.less"/>
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.4/weui.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.6/qs.js"></script>
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <title></title>
</head>
<body>
    <div id="app">
        <div class="main">
            <div class="login-top">
                <header class="title">
                    <div class="spell">{{title}}</div>
                    <a href="./mine.html">
                        <img src="./img/arrow_back.png">
                    </a>
                </header>
            </div>
            <div class="scroll">
                <div  v-for="(item,index) in content">
                    <div>
                        <ul>
                            <li>{{item.time}}</li>
                            <li>{{title}}</li>
                        </ul>
                    </div>
                    <div class="content">
                        <a href="">
                            <img :src="item.img">
                            <ul>
                                <li>{{item.name}}</li>
                                <li>颜色规格：{{item.sales}}</li>
                                <li>状态：代发货({{title}})</li>
                                <li>
                                    <ul>
                                        <li>{{item.price}}</li>
                                        <li>{{item.originalPrice}}</li>
                                    </ul>
                                </li>
                            </ul>
                        </a>
                        <div>
                            <span>共有一件商品，合计金额：</span>
                            <span>￥{{item.paymentAmount}}</span>
                        </div>
                        <!-- <ul>
                            <li>查看详情</li>
                            <li>物流轨迹</li>
                        </ul> -->
                    </div>
                </div> 
            </div>
            <div id="loadingToast" v-if="loadingStatus">
                <div class="weui-mask"></div>
                <div class="weui-toast">
                    <span class="weui-primary-loading weui-icon_toast">
                      <span class="weui-primary-loading__dot"></span>
                    </span>
                    <p class="weui-toast__content">加载中</p>
                </div>
            </div>        
        </div>
    </div>
</body>
</html>
<script type="module">
    import { orderList } from './js/request/api.js';
    import { shareLink, getYMDHMS } from './js/public.js';
    Vue.prototype.public = {shareLink, getYMDHMS};
    let app = new Vue({
        el: '#app',
        data: {
            title: '',
            type: '',
            content:[],
            loadingStatus: false
        },
        mounted(){
            let that = this;
                that.SpellGroup();
                that.public.shareLink();
        },
        methods:{
            SpellGroup(){
                let that = this;
                let query = Qs.parse(location.search.substring(1));
                    that.title = query.name;
                    that.type = query.type;
                let userData = JSON.parse(localStorage.getItem("userData"));
                    that.inviteCode = userData.userId;

                orderList({
                    memberId: that.inviteCode,
                    type: that.type,
                    page: 1
                }).then(res=>{
                    that.loadingStatus = true;
                    if(res.code == 0){
                        let content = res.data.orderCorpsList.map((item,index)=>{
                            return{
                                time: that.public.getYMDHMS(item.payTime),
                                img: item.goodsImage,
                                name: item.goodsName,
                                sales: item.goodsSpec,
                                price: item.goodsPrice,
                                originalPrice: 'x1',
                                paymentAmount: item.paymentAmount
                            }
                        })
                        that.content = content;
                        setInterval(()=>{
                            that.loadingStatus = false;
                        },2000)
                    }
                }).catch(error=>{
                    console.log(error);
                })   
            },
        },
    })
</script>